<!-- 文章分类内容文件 -->
<template>
  <div class="articleAssort" v-loading="loading" element-loading-text="拼命加载中">
    <!-- 标题 -->
    <div class="title">
      <h3>文章类别管理</h3>
      <div>
        <el-button type="primary" size="medium" class="addArticleColoe" @click="isShowfn('添加分类')">添加分类</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-connect">
      <el-table :data="tableData" border style="width: 100%">
        <!-- type为index 则显示索引 , 从 1 开始 -->
        <el-table-column type="index" label="序号" width="166">
        </el-table-column>
        <el-table-column prop="cate_name" label="项目名称">
        </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名">
        </el-table-column>
        <el-table-column label="操作" width="166">
          <template #default="obj">
            <el-button class="addArticleColoe" size="mini" type="primary"
              @click="isShowfn('修改文章分类', obj.row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="isShowfn('删除', obj.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹出的对话框 -->
    <el-dialog title="title" :visible.sync="isShow" width="25%">
      <!-- 对话框标题 -->

      <!-- 添加文章分类 -->
      <div v-if="titleConnect === '添加分类'" slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-warning" style="color: #4f81ff;margin-right:10px;font-size: 24px;"></i>
        </span>
        <span class="title-age"
          style="font-family: PingFangSC-Medium;font-size: 16pxcolor: rgba(0,0,0,0.90);line-height: 24px;font-weight: 500;">添加分类</span>
      </div>
      <!-- 修改文章分类 -->
      <div v-if="titleConnect === '修改文章分类'" slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-warning" style="color: #4f81ff;margin-right:10px;font-size: 24px;"></i>
        </span>
        <span class="title-age"
          style="font-family: PingFangSC-Medium;font-size: 16pxcolor: rgba(0,0,0,0.90);line-height: 24px;font-weight: 500;">修改文章分类</span>
      </div>
      <!-- 删除文章 -->
      <div v-if="titleConnect === '删除'" slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-warning" style="color: red;margin-right:10px;font-size: 24px;"></i>
        </span>
        <span class="title-age"
          style="font-family: PingFangSC-Medium;font-size: 16pxcolor: rgba(0,0,0,0.90);line-height: 24px;font-weight: 500;">提示</span>
      </div>
      <!-- 内容 -->
      <span v-if="titleConnect === '删除'" style="padding-left: 20px;">确定要删除本条信息吗?</span>
      <el-form v-else label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input placeholder="请输入名称" v-model="form.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input placeholder="请输入别名" v-model="form.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowfn('取消')" size="medium">取 消</el-button>
        <!-- 添加文章显示的按钮 -->
        <el-button v-if="titleConnect === '添加分类'" class="addArticleColoe" type="primary" @click="ArticleAssort"
          size="medium">添加</el-button>
        <!-- 修改文章显示的按钮 -->
        <el-button v-if="titleConnect === '修改文章分类'" class="addArticleColoe" type="primary" @click="putArticle"
          size="medium">确认修改</el-button>
        <!-- 删除文章显示的按钮 -->
        <el-button v-if="titleConnect === '删除'" class="addArticleColoe" type="primary" @click="delArticle(form.id)"
          size="medium">确认删除</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
  </div>
</template>

<script>
import store from '@/store'
import { GetArticleAssort, AddArticleAssort, DelArticleAssort, PutArticleAssort } from '@/api/user'
export default {
  props: ['IndexisShow'],
  name: 'articleAssort',
  created () {
    store.commit('user/NewSetToken', localStorage.getItem('token'))
    this.fn()
    this.$emit('setIndexisSHow', true)
  },
  data () {
    return {
      // 控制对话框的显示
      titleConnect: '',
      // 控制对话框的显示隐藏
      isShow: false,
      // 请求加载
      loading: false,
      // 表格数据
      tableData: [],
      // 添加分类表单数据
      form: {
        cate_name: '',
        cate_alias: '',
        id: ''
      },
      rules: {
        cate_name: [
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/, message: '长度为 1 ~ 10位', trigger: ['blur', 'change'] },
          { required: true, message: '请选择输入名称', trigger: ['change', 'blur'] }
        ],
        cate_alias: [
          { pattern: /^[A-Za-z0-9]{1,15}$/, message: '字母或数字 1 ~ 15位', trigger: ['blur', 'change'] },
          { required: true, message: '请选择别名', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    // 请求文章分类
    async fn () {
      this.loading = true
      const res = await GetArticleAssort()
      this.tableData = res.data.data
      this.loading = false
    },
    // 控制弹框的显示隐藏
    isShowfn (value, id) {
      this.form.id = id
      if (value === '取消') {
        this.isShow = false
        this.$refs.form.resetFields()
      }
      if (value === '添加分类') {
        this.titleConnect = '添加分类'
        this.isShow = true
      }
      if (value === '修改文章分类') {
        this.titleConnect = '修改文章分类'
        this.isShow = true
      }
      if (value === '删除') {
        this.titleConnect = '删除'
        this.isShow = true
      }
    },
    // 添加文章分类
    async ArticleAssort () {
      await this.$refs.form.validate()
      await AddArticleAssort(this.form)
      this.fn()
      this.isShow = false
      // 重置表单
      this.$refs.form.resetFields()
    },
    // 删除文章分类
    async delArticle (id) {
      await DelArticleAssort(id)
      this.fn()
      this.isShow = false
    },
    // 修改文章
    async putArticle () {
      this.titleConnect = '修改文章'
      await PutArticleAssort(this.form)
      this.isShow = false
      this.fn()
    }
  }
}
</script>

<style lang="less" scoped>
.articleAssort {

  .table-connect {
    padding: 23px 30px;
    border-radius: 4px 4px 0px 0px;
    background: #fff;

    /deep/ tr,
    /deep/ th,
    /deep/ td {
      padding-left: 10px;
    }

    /deep/ td:last-child {
      padding-left: 0;
      text-align: center;
    }
  }

  .addArticleColoe {
    background: #4F81FF;
    border: 0px;
  }

  .addArticleColoe:hover {
    background: #608DFF;
  }
}

// 将弹出框水平垂直居中显示
/deep/ .el-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
}

.header-title {
  display: flex;
  align-content: center;
}

/deep/ .el-dialog__body {
  padding: 20px 20px 0 20px;
}

// 修改弹框叉号悬浮颜色
/deep/ .el-dialog__headerbtn:hover .el-dialog__close {
  color: #ccc;
}
</style>
